<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
        <link rel="stylesheet" type="text/css" href="css/init.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <!-- 引入样式文件 -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css"/>
        
    </head>
    <body>
        <div id="app">
        </div>
    </body>
    <script type="text/javascript" src="js/vue.min.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
    <script type="text/javascript" src="js/request.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript" src="js/clipboard.js"></script>
    <script type="text/javascript" src="js/vant.min.js"></script>
    <script type="text/javascript">
        let app = new Vue({
            el:'#app',
            data:function(){
                return{
                    payStatus:'支付失败',
                    customerName:'',
                    payDate:'',
                    payType:'',
                    orderNo:'', // 是否为微信浏览器打开的
                    isweixin:false,
                    ismobile:false,
                    orderId:'',
                    showPrice:''
                }
            },
            template:`<div class="pay-wrap">
                            <div class="success-content">
                                <div class="success-tips"><van-icon name="info-o" size="18"/>记得将截图和订单号发给老师哦!</div>
                                <div class="success-sign">
                                    <img class="success-logo" src="./img/logo.jpg?v=1" alt="/">
                                    <p>{{payStatus}}</P>
                                    <p class="success-price">{{showPrice/100}}</p>
                                </div>
                                <div class="success-detail">
                                    <p><span class="detail-text">商户全称:</span> {{customerName}}</p>
                                    <p><span class="detail-text">支付时间:</span> {{payDate}}</p>
                                    <p><span class="detail-text">支付方式:</span> {{payType==='wx'?'微信':'支付宝'}}</p>
                                    <p><span class="detail-text">订单号:</span> {{orderNo}}</p>
                                </div> 
                             
                                <button v-if="orderNo" class="copy-btn" v-clipboard:copy="orderNo"
                                                        v-clipboard:success="onCopy"
                                                        v-clipboard:error="onError">复制订单号</button>
                            </div>           
                    </div>`,
            methods:{
                getUrlParam(paraName) {
            　　　　var url = document.location.toString();
            　　　　var arrObj = url.split("?");
            　　　　if (arrObj.length > 1) {
            　　　　　　var arrPara = arrObj[1].split("&");
            　　　　　　var arr;
            　　　　　　for (var i = 0; i < arrPara.length; i++) {
            　　　　　　　　arr = arrPara[i].split("=");

            　　　　　　　　if (arr != null && arr[0] == paraName) {
            　　　　　　　　　　return arr[1];
            　　　　　　　　}
            　　　　　　}
            　　　　　　return "";
            　　　　}
            　　　　else {
            　　　　　　return "";
            　　　　}
            　　},
                getSuccessParams(){
                    let params = {
                        order_id:this.orderId,   
                    };
                    let that = this;                     
                    request.post('/wechat/pay/info', params).then((res) =>{
                        console.log(res);
                        if(res.code === 2000) {
                            that.customerName = res.data.company_name;
                            that.payDate = res.data.pay_time;
                            that.payType = res.data.type;
                            that.orderNo = res.data.order_no;
                            that.showPrice = res.data.order_money;

                            if(!that.orderNo)
                                that.getSuccessParams();
                            else
                                that.payStatus = "支付成功";    
                            
                        }else{
                            vant.Toast.fail('获取数据失败！');
                        }
                    }).catch((err) => {
                        console.log(err);
                    })
                },
                isWX() {
                    if(isWeiXin()){
                        this.isweixin=true;                       
                    }else{
                        this.isweixin=false;
                    }
                },
                onCopy: function (e) {
                    console.log('You just copied: ' + e.text)
                    vant.Toast('复制成功')
                },
                onError: function (e) {
                    console.log(e)
                    alert('Failed to copy texts')
                },
                InsertLog(){            
                    request.post('/address/updateData',{
                        mobile:this.getUrlParam('mobile'),
                        type:5
                    }).then((res) =>{
                        console.log(res);
                    }).catch((err) => {
                        console.log(err);
                    })
                },
                douyinAtack(){
                   let clickid = this.getUrlParam('clickid') || window.localStorage.getItem("clickid");
                    if(clickid){
                        request.post('/douyin/addTrack',{
                           clickid:clickid,
                           event_type:'active_pay'
                        }).then((res) =>{
                            window.localStorage.removeItem("clickid");
                            console.log(res);
                        }).catch((err) => {
                            console.log(err);
                        })
                    }                    
                }

            },
            created (){
                /*if(isMobile()){
                    this.ismobile = true;
                    this.isWX();
                }else{
                    this.ismobile = false;
                    this.isWX();
                }*/

                this.orderId = this.getUrlParam('order_id');
                if(this.orderId){
                    this.getSuccessParams();
                }
             
                this.InsertLog();
                //抖音
                this.douyinAtack();

            },

        });
    </script>

   

</html>